<h1>
  角色列表
</h1>
<a href="/admin/roles/create" class="btn btn-success mb-3">添加角色</a>
<form method="GET" action="/admin/roles" class="mb-3">
  <div class="input-group">
    <input type="text" name="keyword" class="form-control" placeholder="请输入搜索关键字" value="{{keyword}}">
    <button class="btn btn-outline-secondary">搜索</button>
  </div>
</form>
<table class="table">
  <thead>
    <tr>
      <td>名称</td>
      <td>状态</td>
      <td>排序</td>
      <td>操作</td>
    </tr>
  </thead>
  <tbody>
    {{#each roles}}
    <tr>
      <td>{{this.name}}</td>
      <td>
        <span class="status-toggle" data-id="{{this.id}}" data-status="{{this.status}}">
          {{#if this.status}}
          <i class="bi bi-check-circle-fill text-success"></i>
          {{else}}
          <i class="bi bi-x-circle-fill text-danger"></i>
          {{/if}}
        </span>
      </td>
      <td>
        <span class="sort-text" data-id="{{this.id}}">{{this.sort}}</span>
        <input type="number" class="form-control sort-input d-none" style="width:50%" data-id="{{this.id}}"
          value="{{this.sort}}">
      </td>
      <td>
        <a href="/admin/roles/{{this.id}}" class="btn btn-primary btn-sm">查看</a>
        <a href="/admin/roles/{{this.id}}/edit" class="btn btn-warning btn-sm">修改</a>
        <a class="btn btn-danger btn-sm" onclick="deleteRole({{this.id}})">删除</a>
        <button class="btn btn-info btn-sm" onclick="assignAccesses({{this.id}})">分配资源</button>
      </td>
    </tr>
    {{/each}}
  </tbody>
</table>
<nav>
  <ul class="pagination">
    <li class="page-item {{#if (eq page 1)}}disabled{{/if}}">
      <a class="page-link" href="?page={{dec page}}&keyword={{keyword}}&limit={{limit}}">上一页</a>
    </li>
    {{#each (range 1 pageCount)}}
    <li class="page-item {{#if (eq this ../page)}}active{{/if}}">
      <a class="page-link" href="?page={{this}}&keyword={{../keyword}}&limit={{../limit}}">{{this}}</a>
    </li>
    {{/each}}

    <li class="page-item {{#if (eq page pageCount)}}disabled{{/if}}">
      <a class="page-link" href="?page={{inc page}}&keyword={{keyword}}&limit={{limit}}">下一页</a>
    </li>
    <li class="page-item">
      <form method="GET" action="/admin/roles" class="d-inline-block ms-3">
        <input type="hidden" name="keyword" value="{{keyword}}">
        <input type="hidden" name="page" value="{{page}}">
        <div class="input-group">
          <input type="number" name="limit" class="form-control" placeholder="每页条数" value="{{limit}}" min="1">
          <button class="btn btn-outline-secondary" type="submit">设置每页的条数</button>
        </div>
      </form>
    </li>
  </ul>
</nav>
<div class="modal fade" id="accessModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">给角色分配资源</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="accessForm">
          <div id="accessTree" class="border ronded p-3"></div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secodary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="saveAccesses">保存</button>
      </div>
    </div>
  </div>
</div>
<script>
  const accessTree = {{{ json accessTree }}};
  let selectedRoleId;
  function assignAccesses(roleId) {
    selectedRoleId = roleId;
    $.ajax({
      url: `/admin/roles/${roleId}`,
      type: 'GET',
      headers: { 'accept': 'application/json' },
      success: function ({ role }) {
        const accessIds = role.accesses.map(access => access.id);
        $(`#accessForm input[type="checkbox"]`).each(function () {
          $(this).prop('checked', accessIds.includes(parseInt($(this).val())));
        })
        $('#accessModal').modal('show');
      }
    })
  }
  function deleteRole(id) {
    if (confirm('确定要删除吗?')) {
      $.ajax({
        url: `/admin/roles/${id}`,
        type: 'DELETE',
        success: function (data) {
          if (data.success) {
            const params = new URLSearchParams(window.location.search);
            params.delete('page');
            params.append('page', 1)
            const query = params.toString();
            window.location = window.location.pathname + '?' + query;
          }
        }
      })
    }
  }
  function renderTree(accesses) {
    let html = `<ul class="list-unstyled">`;
    accesses.forEach(function (access) {
      html += `
          <li class="mb-2">
            <div class="d-flex align-items-center">
               ${access.children?.length > 0 ? '<span class="toggle me-2 cursor-pointer"><i class="bi bi-folder-minus"></i></span>' : '<span class="me-4"></span>'}
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input parent-checkbox" data-id="${access.id}" value="${access.id}"/>
                  ${access.name}
                </label>
            </div>
            ${access.children?.length > 0 ? `<div class="children ms-4">${renderTree(access.children)}</div>` : ``}
          </li>
        `;
    });
    html += '</ul>';
    return html;
  }
  $(function () {
    $('#accessTree').html(renderTree(accessTree));
    $('#saveAccesses').on('click', function () {
      const accessIds = $(`#accessForm input[type="checkbox"]:checked`).map(function () {
        return $(this).val();
      }).get();
      $.ajax({
        url: `/admin/roles/${selectedRoleId}/accesses`,
        type: 'PUT',
        headers: { 'accept': 'application/json' },
        contentType: 'application/json',
        data: JSON.stringify({ accessIds }),
        success: function ({ user }) {
          $('#accessModal').modal('hide');
          alert('资源分配成功');
        },
        error: function (error) {
          alert(error.responseJSON.message);
        }
      })
    });
    $('body').on('click', '.toggle', function () {
      const children = $(this).parent().siblings('.children');
      if (children.is(':visible')) {
        children.hide();
        $(this).html(`<i class="bi bi-folder-plus"></i>`);
      } else {
        children.show();
        $(this).html(`<i class="bi bi-folder-minus"></i>`);
      }
    });
    $('body').on('change', '.parent-checkbox', function () {
      const isChecked = $(this).is(':checked');
      $(this).closest('li').find('.children input[type="checkbox"]').prop('checked', isChecked)
    })
    $('.sort-text').on('dblclick', function () {
      const $this = $(this);
      const id = $this.data('id');
      $this.addClass('d-none');
      $(`.sort-input[data-id="${id}"]`).removeClass('d-none').focus();
    });
    $('.sort-input').on('blur', function () {
      const $this = $(this);
      const id = $this.data('id');
      const newSort = $this.val();
      $this.addClass('d-none');
      $.ajax({
        url: `/admin/roles/${id}`,
        type: 'PUT',
        headers: { 'accept': 'application/json' },
        contentType: 'application/json',
        data: JSON.stringify({ sort: newSort }),
        success: function (data) {
          if (data.success) {
            $(`.sort-text[data-id="${id}"]`).removeClass('d-none').text(newSort);
          }
        }
      })
    });
    $('.status-toggle').on('click', function () {
      const $this = $(this);
      const id = $this.data('id');
      const currentStatus = $this.data('status');
      const newStatus = currentStatus == 1 ? 0 : 1;
      $.ajax({
        url: `/admin/roles/${id}`,
        type: 'PUT',
        headers: { 'accept': 'application/json' },
        contentType: 'application/json',
        data: JSON.stringify({ status: newStatus }),
        success: function (data) {
          if (data.success) {
            $this.data('status', newStatus);
            $this.html(` <i class="bi ${newStatus ? 'bi-check-circle-fill' : 'bi-x-circle-fill'} ${newStatus ? 'text-success' : 'text-danger'}"></i>`);
          }
        }
      })
    });
  });
</script>